<template>
  <view v-if="m_isLoaded" class="c">
    <u-transition :show="m_show" mode="slide-left">
      <div class="t">
        {{ m_pageData.FName }}
      </div>

      <li-form>
        <li-form-item label="优惠说明"
          >{{ m_pageData.FDescription }}
        </li-form-item>
        <li-form-item label="有效时间"
          >{{ formatTime(m_pageData.FStartDate) }}-{{
            formatTime(m_pageData.FEndDate)
          }}
        </li-form-item>
        <li-form-item label="适用商品"
          >{{
            m_pageData.goodsList.length == 0
              ? "全部"
              : m_pageData.goodsList.map((i) => i.FName).join("、")
          }}
        </li-form-item>
        <li-form-item label="使用说明">{{ m_pageData.FNotice }} </li-form-item>
      </li-form>
    </u-transition>
  </view>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api";
import { reqPost } from "../../common/http.request";
import { useUser } from "../../store/useUser";
import {
  uGetStorageSync,
  uNavigateBack,
  uNavigateTo,
  uToast,
} from "../../utils/uniUtils";

export default {
  onLoad({ id }) {
    if (id) {
      this.id = id;
    } else {
      uNavigateBack();
    }
  },

  setup() {
    onMounted(async () => {
      if (!useUser().hasLogin) {
        uToast("您还未登录！", "error");
        setTimeout(() => {
          uNavigateTo();
        }, 1500);
      } else {
        await GetPageList();
        m_isLoaded.value = true;
      }
    });

    const m_pageData = ref([]);
    const m_isLoaded = ref(false);

    const m_show = ref(false);
    const id = ref(0);
    const MemberId = uGetStorageSync("member").MemberId;

    async function GetPageList() {
      const { Data } = await reqPost("GetCouponById", {
        MemberId,
        id: id.value,
      });
      m_pageData.value = Data;
      m_show.value = true;
    }

    function formatTime(dt) {
      const date = new Date(dt);
      const formattedDateTime = `${date.getFullYear()}-${String(
        date.getMonth() + 1
      ).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(
        date.getHours()
      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(
        2,
        "0"
      )}:${String(date.getSeconds()).padStart(2, "0")}`;

      return formattedDateTime;
    }
    return {
      m_pageData,
      m_isLoaded,
      id,
      m_show,
      formatTime,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/couponDetail.scss";
</style>
